<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-else</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="case5-demo2">
    <h1>下面随机显示图片</h1>
    <div v-if="randomUp">
        <h1>这是图片1,点击下方图片更换图片</h1>
        <img v-bind:src="mesSrc" v-on:click="clickChange">
    </div>
    <div v-else>
        <h1>这是图片2，点击下方图片更换图片</h1>
        <img v-bind:src="mesSrc2" v-on:click="clickChange">
    </div>
</div>
<script type="text/javascript">
    var case5Demo=new Vue({
        el:"#case5-demo2",
        data:{
            mesSrc:"../images/timg2.jpg",
            mesSrc2:"../images/timg3.png",
            randomUp:Math.random()>0.5
        },
        methods:{
            clickChange:function () {
                this.randomUp=!this.randomUp
            }
        }
    })
</script>
</body>
</html>